<template>
  <div class="first">
    <van-nav-bar title=" " left-arrow @click-left="onClickLeft" />
    <div class="page page1" v-if="forgetStep === 1">
      <div class="hint">请输入手机号</div>
      <van-field
        v-model="phone"
        label=""
        placeholder="手机号"
        type="tel"
        maxlength="11"
        class="input"
      />
      <van-button primary @click="next" round class="button">下一步</van-button>
    </div>
  </div>
  <div class="page page1" v-if="forgetStep === 2">
    <div class="hint">输入4位验证码</div>
    <van-password-input
      :value="value"
      :mask="false"
      :gutter="10"
      :length="4"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
      style="width: 80%; margin: 0 auto"
      class="yzm"
    />
    <div class="hint2-container">
      <div class="hint2">50秒后重试</div>
    </div>
    <van-button primary @click="next" round class="button">下一步</van-button>
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
  </div>
  <div class="page page1" v-if="forgetStep === 3">
    <div class="hint">重置密码</div>
    <van-field
      v-model="password"
      label=""
      placeholder="密码"
      type="tel"
      maxlength="11"
      class="input"
    />
    <van-field
      v-model="password1"
      label=""
      placeholder="重复密码"
      type="tel"
      maxlength="11"
      class="input"
    />
    <van-button primary @click="next" round class="button">修改</van-button>
  </div>
</template>

<script>
export default {
  name: "ForgetPassword",
  data() {
    return {
      phone: "",
      forgetStep: 1,
      showKeyboard: true,
      value: "1",
    };
  },
  methods: {
    onClickLeft() {
      if (this.forgetStep === 1) {
        this.$router.back();
      } else {
        this.forgetStep -= 1;
      }
    },
    next() {
      if (this.forgetStep === 3) {
        console.log("提交");
      } else {
        if (this.forgetStep === 1) {
          console.log("第一步");
        } else if (this.forgetStep === 2) {
          console.log("第二步");
        }
        this.forgetStep += 1;
      }
    },
  },
};
</script>
<style scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: fixed;
  width: 100%;
  height: 100%;
  top: -15%;
  left: 0;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.hint {
  font-size: 25px;
  margin-bottom: 40px;
}

.hint2-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  width: 100%;
  color: #969799;
  font-size: 15px;
}

.input {
  background-color: #f7f8fa;
  border-radius: 50px;
  color: black;
  margin: 10px 0;
}

.button {
  width: 100%;
  height: 6%;
  margin-top: 20px;
  display: block;
  background-color: #4d86ff;
  color: whitesmoke;
}

::v-deep(.van-password-input__security li) {
  border-bottom: 1px solid #dddddd;
  border-radius: 15px;
  background: #f0f3f5;
}
</style>